<template>
  <el-container>
  <el-header>菜谱大全</el-header>
  <el-container>
    <el-aside width="200px">
        <el-col :span="12">
          <h5>分类列表</h5>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo">
            <el-submenu :index="type.classid" v-for="(type,i) in typeList" :key="type.classid">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{type.name}}</span>
              </template>
              <el-menu-item-group v-for="(t,index) in type.list" :key="index">
                <el-menu-item :index="t.classid" @click="getFoods(t.classid)">{{t.name}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
import { getAllTypes } from "../service/foods";

export default {
  name: "Home",
  data() {
    return {
      isLoading: true,
      typeList: [],
      classid: 2
    };
  },

  methods: {
    getFoods(classid) {
      this.isLoading = true;
      this.classid = classid;
       this.$router.push({
        name:'FoodList',
        query:{
          classid, // 相当于 id:id
        },
      })
    },
    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    // handleClose(key, keyPath) {
    //   console.log(key, keyPath);
    // }
  },

  created() {
    getAllTypes().then(res => {
      this.typeList = res.data.result;
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
  margin:0;
  padding: 0;
}
 button{
   border:none;
   padding: 5px 10px;
   background: lightgreen;
 }
 header{
   background: #333;
   color: orangered;
   font-size: 20px;
   text-align: center;
   line-height: 60px;
 }
 aside{
   height: 800px;
 }
 h5{
   text-align: center;
   font-size: 20px;
   padding: 10px 0; 
 }
 .el-col-12{
   width: 100%;
 }
 ul {
   width: 100%;
 }
 ul li{
   width: 100%;
 }
 main{
   height: 800px;
 }
</style>
